<template>
  <div class="todo-mvc">
    <div class="todo-wrapper">
      <TodoTime></TodoTime>
      <TodoType :num="todoList.length"></TodoType>
      <TodoAdd></TodoAdd>
      <ul>
        <TodoItem
          v-for="item in renderTodoList"
          :key="item.id"
          v-bind="item"
        ></TodoItem>
        <li v-if="renderTodoList.length === 0">当前类型没有任务，请添加！</li>
      </ul>
    </div>
  </div>
</template>

<script>
import './index.css'
import TodoTime from './TodoTime.vue'
import TodoAdd from './TodoAdd.vue'
import TodoType from './TodoType.vue'
import TodoItem from './TodoItem.vue'
import { mapState, mapGetters } from 'vuex'
export default {
  data () {
    return {

    }
  },

  computed: {
    ...mapState(['todoList']),
    ...mapGetters(['renderTodoList'])
  },
  components: {
    TodoTime,
    TodoAdd,
    TodoType,
    TodoItem
  }
}
</script>

<style>
</style>
